<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由嵌套</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router-3.0.1.js"></script>
</head>
<body>
    <!--需求：在一个账号页面中，存在两个按钮，点击则在首页中显示登录和注册-->
    <div id="app">
        <router-link to="/index">进入首页</router-link>
        <router-view></router-view>
        <!--下面要做的是，在已经存在一个路由的情况下，需要显示子路由-->

    </div>

    <template id="index">
        <div>
            <h2>首页</h2>
            <!--嵌套组件的写法-->
            <router-link to="/index/login">登录</router-link>
            <router-link to="/index/register">注册</router-link>
            <router-view></router-view>
        </div>
    </template>

    <script>
        //创建组件
        var index = {
            template:"#index"
        }

        var login = {
            template:"<h4>登录页面</h4>"
        }

        var register = {
            template:"<h4>注册页面</h4>"
        }

        //创建vue-router实例
        var router = new VueRouter({
            //定义路由规则
            routes:[
                {
                    path:'/index',
                    component:index,
                    children:[
                        {path:'login',component:login},
                        {path:'register',component:register},
                    ]
                },
                //用下面这种方式会覆盖掉首页router-view中的内容
                /*{path:'/index/login',component:login},
                {path:'/index/register',component:register}*/
            ]
        });

        var vue = new Vue({
            el:"#app",
            data:{

            },
            methods:{

            },
            //关联路由和vue实例
            router:router
        });
    </script>
</body>
</html>